<template>
    <div>
      <!-- //新增面板 -->
        <el-dialog 
        :close-on-click-modal="false"
         :title="pagetitle" 
         :visible="addshow" 
         @close="cancle">
  <el-form ref="myform" :model="form" label-width="100px" :rules="rules">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="部门编码"  prop="code">
      <el-input v-model="form.code" autocomplete="off"></el-input>
    </el-form-item>
<el-form-item label="部门负责人" prop="manager">
          <el-select v-model="form.manager" placeholder="请选择">
            <el-option
              v-for="(item, index) in userList"
              :key="index"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancle">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </div>
</el-dialog>
    </div>
</template>

<script>
import {
  getDepartmentApi,
  addDepartmentApi,
  getDepartmentByIdApi,
  editDepartmentByIdApi
} from "@/api/departments";
import { getaddpartApi } from "@/api/employees";

export default {
  //addshow:控制版面的显示与隐藏
  //currentObj:当前操作的部门对象
  props: ["addshow", "currentObj"],
  data() {
    return {
      //   // 控制面板的显示与隐藏
      //   dialogFormVisible: true,
      // 表单的数据源
      form: {
        name: "", //部门名称
        code: "", //部门编码
        manager: "", //部门管理者
        introduce: "" //部门介绍
      },

      //数据校验规则
      rules: {
        name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          { min: 1, max: 50, message: "名称长度为1~50", trigger: "blur" },
          {
            validator: async (rule, value, callback) => {
              const res = await getDepartmentApi();
              if (!this.form.id) {
                // 新增的规则 currentObj:要添加的子部门的上一级的节点
                res.data.depts.some(
                  item => item.name === value && item.pid === this.currentObj.id
                )
                  ? callback(new Error("部门名称不能重复"))
                  : callback();
              } else {
                // 编辑的规则 currentObj：当前操作的部门对象
                // 与同级子部门名称不能重复，将自己从子部门排除掉
                res.data.depts.some(
                  item =>
                    item.name === value &&
                    item.pid === this.currentObj.pid &&
                    item.id !== this.form.id
                )
                  ? callback(new Error("部门名称不能重复"))
                  : callback();
              }
            },
            trigger: "blur"
          }
        ],
        code: [
          { required: true, message: "部门编码不能为空", trigger: "blur" },
          { min: 1, max: 50, message: "编码长度为1~50", trigger: "blur" },
          {
            validator: async (rule, value, callback) => {
              //获取所有部门的数据
              const res = await getDepartmentApi();
              if (!this.form.id) {
                //判断所有数据中的 code 是否与 value 相同
                res.data.depts.some(item => item.code === value)
                  ? callback(new Error("部门编码不能重复"))
                  : callback;
              } else {
                //编辑
                //判断所有的数据 code 是否与 value 相同
                res.data.depts.some(
                  item => item.code === value && item.id !== this.form.id
                )
                  ? callback(new Error("部门编码不能重复"))
                  : callback();
              }
            },
            trigger: "blur"
          }
        ],
        manager: [
          { required: true, message: "负责人不能为空", trigger: "blur" }
        ],
        introduce: [
          { required: true, message: "部门介绍不能为空", trigger: "blur" },
          { min: 1, miax: 300, message: "部门介绍长度为1~300", trigger: "blur" }
        ]
      },
      // 保存负责人的列表
      userList: []
    };
  },
  computed: {
    pagetitle: function() {
      return this.form.id ? "编辑部门" : "新增部门";
    }
  },
  methods: {
    //得到当前操作部门的数据源
    async getItem(id) {
      const res = await getDepartmentByIdApi(id);
      console.log(res.data);
      //保存数据源
      this.form = res.data;
    },
    //关闭面板
    cancle() {
      this.$emit("update:addshow", false);
      //将数据源清除
      this.form = {
        name: "", //部门名称
        code: "", //部门编码
        manager: "", //部门管理者
        introduce: "" //部门介绍
      };
      //重置表单校验
      this.$refs.myform.resetFields();
    },
    // 提交数据到服务器
    submit() {
      // 全局验证
      
        this.$refs.myform.validate(async val => {
     
        if (val) {
          if (!this.form.id) {
            // 新增
            // 判断是否添加的是一级部门
            //  是：数据的 pid = '-1'
            //  否：数据的 pid != '-1'
            // 提交数据到服务器
            await addDepartmentApi({
              ...this.form,
              pid: this.currentObj.pid === "-1" ? "" : this.currentObj.id
            });
          } else {
            // 修改
            await editDepartmentByIdApi(this.form);
          }
          // 处理其它
          // 关闭新增面板
          this.$emit("update:addshow", false);
          // 提示新增成功
          this.$message.success(this.form.id ? "编辑成功" : "新增成功");
          // 更新页面数据
          this.$emit("updateList");
          // 清除 form
          this.form = {
            name: "",
            code: "",
            manager: "",
            introduce: ""
          };
        } else {
          console.log("不通过");
        }
      });
    },
    // 得到所有的负责人列表
    async getUserSimple() {
      //请求数据
      const res = await getaddpartApi();
      // console.log(res);
      //绑定数据
      this.userList = res.data;
    }
  },

  created() {
    // 得到所有的负责人列表
    this.getUserSimple();
  }
};
</script>

<style>
</style>
